<template>
	<select
		class="year-select"
		:title="title"
		@change="(e) => handleChange(e.target.value)"
	>
		<option
			class="year-select-option"
			v-for="item in visibleData"
			:key="item.value"
			:value="item.value"
		>
			{{ item.label }}
		</option>
	</select>
</template>
<script>
const nowYear = new Date().getFullYear();

export default {
	name: 'select-view',

	props: {
		year: {
			type: Boolean,
			default: false,
		},
	},

	data() {
		return {
			years: [
				{
					label: nowYear + '年',
					value: nowYear,
				},
				{
					label: nowYear - 1 + '年',
					value: nowYear - 1,
				},
				{
					label: nowYear - 2 + '年',
					value: nowYear - 2,
				},
			],
			days: [
				{
					value: 'week',
					label: '本周',
				},
				{
					value: 'day',
					label: '当日',
				},
			],
		};
	},

	computed: {
		visibleData() {
			return this.year ? this.years : this.days;
		},
		title() {
			return this.year ? '选择年份' : '选择时间段';
		},
	},

	mounted() {
		this.handleChange(this.visibleData[0].value);
	},

	methods: {
		handleChange(value) {
			this.$emit('change', value);
		},
	},
};
</script>
<style></style>
